<template>
  <div class="editUser">
    <div class="editUserLeft">
      <el-icon>
        <Tickets />
      </el-icon>
      <span>数据列表</span>
    </div>
    <div class="editUserRight">
      <el-button @click="show = true">添加</el-button>
    </div>
  </div>
  <el-table
    :data="list"
    table-layout="auto"
    cell-class-name="align-c"
    border
    select-on-indeterminate
    @selection-change="handleSelectionChange"
  >
    <el-table-column prop="id" type="selection" />
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="name" label="原因类型" />
    <el-table-column prop="sort" label="排序" />
    <el-table-column prop="status" label="是否可用">
      <template #default="{ row }">
        <el-switch
          v-model="row.status"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="添加时间">
      <template #default="{ row }">
        <span>{{ formateDate(row.createTime) }}</span>
      </template>
    </el-table-column>

    <el-table-column prop="description" label="操作">
      <template #default="{ row }">
        <el-button @click="edit(row.id)">编辑</el-button>
        <el-button @click="del(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <div>
      <el-select v-model="selete" placeholder="批量操作">
        <el-option label="删除" value="删除" />
      </el-select>
      <el-button type="primary" @click="moreDel">确定</el-button>
    </div>
    <!-- 分页 -->
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="orderParams.pageNum"
        v-model:page-size="orderParams.pageSize"
        :page-sizes="[5, 10, 15, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageChangeHandle"
        @current-change="pageSizeChangeHandle"
      />
    </ElConfigProvider>
  </div>
  <!-- 添加框 -->
  <div>
    <el-dialog :model-value="show" title="添加退货原因" @close="quxiao">
      <el-form
        ref="formRef"
        :model="form"
        label-position="right"
        label-width="auto"
      >
        <el-form-item label="原因类型：" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input v-model="form.sort" autocomplete="off" />
        </el-form-item>
        <el-form-item label="是否启用" prop="status">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="quxiao">取消</el-button>
          <el-button type="primary" @click="submitFn">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <!-- 编辑框 -->
  <div>
    <el-dialog :model-value="show1" title="编辑退货原因" @close="quxiao1">
      <el-form
        ref="formRef"
        :model="form1"
        label-position="right"
        label-width="auto"
      >
        <el-form-item label="原因类型：" prop="name">
          <el-input v-model="form1.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input v-model="form1.sort" autocomplete="off" />
        </el-form-item>
        <el-form-item label="是否启用" prop="status">
          <el-switch
            v-model="form1.status"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="quxiao1">取消</el-button>
          <el-button type="primary" @click="submitFn1">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ElConfigProvider, ElMessage, ElMessageBox } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { reactive, ref } from "vue";
import {
  returnReasonListApi,
  createReturnReasonApi,
  deleteReturnReasonApi,
  editReturnReasonApi,
  updateReturnReasonApi,
} from "./api";
import { formateDate } from "@/utils";

// 绑定得value
const selete = ref();
// 点击勾选框活的id批量删除
const moreDel = () => {
  if (multipleSelection.value.length > 0 && selete.value) {
    if (selete.value === "删除") {
      ElMessageBox.confirm("是否要进行该删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteReturnReasonApi(multipleSelection.value).then((res) => {
            if (res.code === 200) {
              ElMessage.success("删除成功");
              getReasonList();
            }
          });
        })
        .catch(() => {});
        multipleSelection.value=[]
    }else{
      ElMessage.warning("清选择需要的操作");
    }
  } else {
    ElMessage.warning("清选择需要删除的数据");
  }
};
const multipleSelection = ref<number[]>([]);
const handleSelectionChange = (val: any[]) => {
  console.log("val", val);
  if (val.length === 0) return
    multipleSelection.value = val.reduce(
      (pre: number[], next: { id: number }) => {
        return pre.concat(next.id);
      },
      []
    );
    console.log("mm", multipleSelection.value);
  
};

// 底部分页参数
const orderParams = reactive<IOrderReason>({
  pageNum: 1,
  pageSize: 5,
});

// 控制添加弹出框
const show = ref(false);
// 控制编辑弹出框
const show1 = ref(false);

// 添加弹出框的数据
const form = ref<ICreateReturnReason>({
  name: "",
  sort: 0,
  status: 1,
});

// 编辑弹出框的数据
const form1 = ref<IEditReturnReason>({
  id: 0,
  name: "",
  sort: 0,
  status: 1,
});

// 点击编辑
const edit = (id: number) => {
  editReturnReasonApi(id).then((res) => {
    if (res.code === 200) {
      form1.value.name = res.data.name;
      form1.value.sort = res.data.sort;
      form1.value.status = res.data.status;
      form1.value.id = res.data.id;
      show1.value = true;
    }
  });
};

// 编辑框确认
const submitFn1 = () => {
  updateReturnReasonApi(form1.value).then((res) => {
    if (res.code === 200) {
      ElMessage.success("编辑成功！");
      form1.value.name = "";
      form1.value.sort = 0;
      form1.value.status = 1;
      form1.value.id = 0;
      show1.value = false;
      getReasonList();
    }
  });
};

// 编辑框取消
const quxiao1 = () => {
  show1.value = false;
  form1.value.name = "";
  form1.value.sort = 0;
  form1.value.status = 1;
  form1.value.id = 0;
};
// 添加取消
const quxiao = () => {
  show.value = false;
  form.value.name = "";
  form.value.sort = 0;
  form.value.status = 1;
};

// 删除信息
const del = (val: number[]) => {
  ElMessageBox.confirm("是否要进行该删除操作?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      console.log("点击了确定");
      deleteReturnReasonApi(val).then((res) => {
        if (res.code === 200) {
          ElMessage.success("删除成功");
          getReasonList();
        }
      });
    })
    .catch(() => {
      console.log("点击了取消");
    });
};

// 分页查询全部退货原因列表
const getReasonList = () => {
  returnReasonListApi(orderParams).then((res) => {
    if (res.code === 200) {
      total.value = res.data.total;
      list.value = res.data.list;
      console.log("res", res);
    }
  });
};
getReasonList();

const pageChangeHandle = () => {
  getReasonList();
};
const pageSizeChangeHandle = () => {
  getReasonList();
};

// 数量共多少条
const total = ref(0);

const list = ref<List[]>([]);

// 确认添加
const submitFn = () => {
  createReturnReasonApi(form.value).then((res) => {
    if (res.code === 200) {
      ElMessage.success("添加成功！");
      form.value.name = "";
      form.value.sort = 0;
      form.value.status = 1;
      show.value = false;
      getReasonList();
    }
  });
};
</script>
<style lang="less" scoped>
:deep(.align-c) {
  .cell {
    text-align: center;
  }
}
.editUser {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 4px 2px #ccc;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  align-items: center;
}
.page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}
</style>
